<!-- 销售品类占比 -->
<template>
  <div class="proportionOfSalesCategories">
    <el-radio-group v-model="radio" @change="changeType">
      <el-radio-button label="销量"></el-radio-button>
      <el-radio-button label="销售金额"></el-radio-button>
    </el-radio-group>
    <div class="proportionOfSalesCategories_content">
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories1" ref="proportionOfSalesCategories1" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData1" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories2" ref="proportionOfSalesCategories2" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData2" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories3" ref="proportionOfSalesCategories3" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData3" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories4" ref="proportionOfSalesCategories4" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData4" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories5" ref="proportionOfSalesCategories5" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData5" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories6" ref="proportionOfSalesCategories6" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData6" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories7" ref="proportionOfSalesCategories7" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData7" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
      <div class="chart">
        <div class="pieChart">
          <pieChart id="proportionOfSalesCategories8" ref="proportionOfSalesCategories8" height="90%"></pieChart>
        </div>
        <tableBox class="tb" :data="tableData8" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
        </tableBox>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getSaleMoneyByCommodityTypeId, getLevelSaleTableByCommodityTypeId } from "@/api/bi/sale";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      radio: '销量',
      tableThead: ['', '商品名称', '销量'],

      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      typeArr: [
        { text: '清洁工具', id: 21 },
        { text: '清洁药剂', id: 22 },
        { text: '垃圾处置', id: 23 },
        { text: '承载收纳', id: 25 },
        { text: '机械配件', id: 90 },
        { text: '客用品', id: 28 },
        { text: '劳保用品', id: 27 },
        { text: '其他', id: 37 },
      ],
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getPieChart(1)
    this.getTableData(1)
  },
  methods: {
    changeType(val) {
      this.load = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (val == '销售金额') {
        this.tableThead = ['', '商品名称', '销售金额']
        this.getPieChart(2)
        this.getTableData(2)
      } else {
        this.tableThead = ['', '商品名称', '销量']
        this.getPieChart(1)
        this.getTableData(1)
      }
    },
    async getPieChart(paramType) {
      let typeArr = this.typeArr

      const { data: res1 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[0].id, paramType });
      const { data: res2 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[1].id, paramType });
      const { data: res3 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[2].id, paramType });
      const { data: res4 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[3].id, paramType });
      const { data: res5 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[4].id, paramType });
      const { data: res6 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[5].id, paramType });
      const { data: res7 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[6].id, paramType });
      const { data: res8 } = await getSaleMoneyByCommodityTypeId({ commodityTypeId: typeArr[7].id, paramType });
      const resList = [res1, res2, res3, res4, res5, res6, res7, res8]
      let chartData1 = [], chartData2 = [], chartData3 = [], chartData4 = [], chartData5 = [], chartData6 = [], chartData7 = [], chartData8 = []

      chartData1 = [{ name: '成本', value: res1.saleCostRate }, { name: '利润', value: res1.saleProfitRate }]
      chartData2 = [{ name: '成本', value: res2.saleCostRate }, { name: '利润', value: res2.saleProfitRate }]
      chartData3 = [{ name: '成本', value: res3.saleCostRate }, { name: '利润', value: res3.saleProfitRate }]
      chartData4 = [{ name: '成本', value: res4.saleCostRate }, { name: '利润', value: res4.saleProfitRate }]
      chartData5 = [{ name: '成本', value: res5.saleCostRate }, { name: '利润', value: res5.saleProfitRate }]
      chartData6 = [{ name: '成本', value: res6.saleCostRate }, { name: '利润', value: res6.saleProfitRate }]
      chartData7 = [{ name: '成本', value: res7.saleCostRate }, { name: '利润', value: res7.saleProfitRate }]
      chartData8 = [{ name: '成本', value: res8.saleCostRate }, { name: '利润', value: res8.saleProfitRate }]

      let titleArr = []
      typeArr.forEach((item, index) => {
        titleArr.push({
          text: item.text,
          left: 'center',
          top: '40%',
          subtext: this.radio == '销量' ? '销量:' + resList[index].saleNumber : '销售金额:' + resList[index].saleMoney
        })
      })
      let radius = ['40%', '80%']
      let label = { show: false }
      let itemStyle = {
        borderRadius: 8,
        borderColor: '#fff',
        borderWidth: 2
      }

      this.$refs.proportionOfSalesCategories1.initChart(chartData1, null, titleArr[0], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories2.initChart(chartData2, null, titleArr[1], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories3.initChart(chartData3, null, titleArr[2], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories4.initChart(chartData4, null, titleArr[3], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories5.initChart(chartData5, null, titleArr[4], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories6.initChart(chartData6, null, titleArr[5], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories7.initChart(chartData7, null, titleArr[6], radius, label, itemStyle)
      this.$refs.proportionOfSalesCategories8.initChart(chartData8, null, titleArr[7], radius, label, itemStyle)

    },
    async getTableData(paramType) {

      let typeArr = this.typeArr

      const { data: res1 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[0].id, paramType });
      const { data: res2 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[1].id, paramType });
      const { data: res3 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[2].id, paramType });
      const { data: res4 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[3].id, paramType });
      const { data: res5 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[4].id, paramType });
      const { data: res6 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[5].id, paramType });
      const { data: res7 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[6].id, paramType });
      const { data: res8 } = await getLevelSaleTableByCommodityTypeId({ commodityTypeId: typeArr[7].id, paramType });

      this.tableData1 = this.formatTableData(res1)
      this.tableData2 = this.formatTableData(res2)
      this.tableData3 = this.formatTableData(res3)
      this.tableData4 = this.formatTableData(res4)
      this.tableData5 = this.formatTableData(res5)
      this.tableData6 = this.formatTableData(res6)
      this.tableData7 = this.formatTableData(res7)
      this.tableData8 = this.formatTableData(res8)
      this.load.close()
    },
    formatTableData(data) {
      let arr = []
      data.forEach(item => {
        arr.push([{ val: item.commodityTypeName }, { val: this.radio == '销售金额' ? item.saleMoney : item.saleNumber }])
      })
      if (arr.length == 0) {
        arr.push([{ val: '暂无数据', colspan: 2 }])
      }

      return arr
    },
  }

}
</script>
<style lang="scss" scoped>
.proportionOfSalesCategories {
  background: rgba(255, 255, 255, 0.6);
  height: 100%;
  width: 100%;
  padding: 22px;

  .proportionOfSalesCategories_content {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    // margin: 0 -22px;
    height: 100%;
    width: 100%;
    justify-content: space-between;

    .chart {
      width: 12%;
      // height: 50%;
      display: flex;
      flex-direction: column;

      // padding: 11px 22px;

      .pieChart {
        width: 100%;
        height: 32%;
        flex-shrink: 0;
        // border: 1px solid red;
      }
    }
  }


}
</style>
